<template>
  <div class="container-item-tag-edit">
    <el-tag v-for="(temp,index) in procucers" :key="index" closable size="mini" :type="temp.type" @close="handlerClose(temp.tag)">{{ temp.tag }}</el-tag>
    <span v-if="procucers.length<6">
      <el-input v-if="inputVisible" ref="saveTagInput" v-model="inputValue" maxlength="7" class="input-new-tag" size="mini" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm" />
      <el-button v-else class="button-new-tag el-icon-plus" size="mini" @click="showInput" />
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 出品方组
      procucers: [],
      inputVisible: false,
      inputValue: ''
    }
  },
  methods: {
    handlerClose(procucers) {
      this.procucers.splice(this.procucers.indexOf(procucers), 1)
    },
    // 显示出品方输入框
    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    // 添加出品方标签
    handleInputConfirm() {
      const inputValue = this.inputValue
      if (inputValue) {
        this.procucers.push({ tag: inputValue })
      }
      const arr = []
      for (const val of this.procucers) {
        arr.push(val.tag)
      }
      this.inputVisible = false
      this.inputValue = ''
      this.$emit('change', arr.toString())
    }
  }
}
</script>

<style>
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 22px;
  line-height: 20px;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 12px;
}
.input-new-tag {
  width: 90px;
  box-sizing: border-box;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
